<!DOCTYPE HTML>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- <meta http-equiv="refresh" content="1"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel = "stylesheet" href="{{ url_for('static', filename='css/SC_index.css') }}" type="text/css">
</head>

<body>
    <h1>宠物控制页面</h1>
    <div class = "time">
        当前时间：
        <div id="nowtime">{{date.hour}}:{{date.minute}}:{{date.second}}</div>
    </div>
    <div id="E32Cam">
        <div class = "textline">用户id：<div id="userid">{{ESP32Cam.id}}</div></div>

        <div class = "textline">
            自动喂养：
            <div id="autofeed" class="space">
            {% if ESP32Cam.autofeed %}
                开启
            {% else %}
                关闭
            {% endif %}
            </div>
            <button id="autofeedShift" type="submit">切换</button>
        </div>

        <div class = "textline">
            时间0：<div id="feedtime0">{{ESP32Cam.feedtime0}} </div>
            <div id="feedtime0On" class="space">
                {% if ESP32Cam.feedtime0On %}
                    开启
                {% else %}
                    关闭
                {% endif %}
            </div>
            <button id="feedtime0Shift" type="submit">切换</button>
        </div>

        修改时间0：<input type="text" id="time0setInput">
        <button id="time0set" type="submit">提交</button>

        <div class = "textline">
            时间1：<div id="feedtime1">{{ESP32Cam.feedtime1}}</div>
            <div id="feedtime1On" class="space">
                {% if ESP32Cam.feedtime1On %}
                    开启
                {% else %}
                    关闭
                {% endif %}
            </div>
            <button id="feedtime1Shift" type="submit">切换</button>
        </div>

        修改时间1：<input type="text" id="time1setInput">
        <button id="time1set" type="submit">提交</button>

        <div class = "textline">时间2：<div id="feedtime2">{{ESP32Cam.feedtime2}}</div>
            <div id="feedtime2On" class="space">
            {% if ESP32Cam.feedtime2On %}
                开启
            {% else %}
                关闭
            {% endif %}
            </div>
            <button id="feedtime2Shift" type="submit">切换</button>
        </div>

            修改时间2：<input type="text" id="time2setInput">
            <button id="time2set" type="submit">提交</button>

        <div class = "textline">放粮时长：<div id="feedsize0">{{ESP32Cam.feedsize0}}</div>秒</div>
        
        修改时长：<input type="text" id="size0setInput">
        <button id="size0set" type="submit">提交</button>

        <div class = "textline">放水高度：<div id="feedsize1">{{ESP32Cam.feedsize1}}</div>格</div>
        
        修改高度：<input type="text" id="size1setInput">
        <button id="size1set" type="submit">提交</button>

    </div>
    <style type="text/css">
    </style>
    <div id="container">
        <h2>图像数据</h2>
        <img src="{{ url_for('static', filename='uploads/456',_t=date) }}" alt="{{filename}}" class="upsidedown" id="image"> 
    </div>
</body>
<script>
    /* 向控制端发送数据 */
    function senddata(data) {
        $.ajax({
            url: '/SC/ctrl', // 路由处理函数
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json',
            dataType: 'json',
            success: function() {
                console.log('Data sent to Flask server');
            },
            error: function() {
                console.log('Error sending data to Flask server');
            }
        });
    }
     $(document).ready(function() {
            $('#autofeedShift').click(function() {
                var data = {'cmd': 'auto' }; // 将按键状态传递给 Flask 服务器
                senddata(data);
            });
            for(var i=0;i<3;i++){
                ((i) => {
                    $('#feedtime'+i+'Shift').click(function() {
                        var data = {'cmd': 'turn'+i }; // 将按键状态传递给 Flask 服务器
                        senddata(data);
                    });
                    $('#time'+i+'set').click(function() {
                        var time = $("#time"+i+"setInput").val()
                        const hour = Number(time.substring(0, 2))
                        const dot1 = time.substring(2, 3)
                        const minute = Number(time.substring(3, 5))
                        const dot2 = time.substring(5, 6)
                        const second = Number(time.substring(6, 8))
                        if((hour >= 0 && hour <= 23) && (minute >= 0 && minute <= 59) && (second >=0 && second <= 59) && (dot1 == ":" && dot2 == ":")){
                            var cmd = "feed" + i + String.fromCharCode(hour + 48) + String.fromCharCode(minute + 48) + String.fromCharCode(second + 48);
                            data = {'cmd' : cmd};
                            senddata(data);
                        }
                    });
                })(i);
            }
            $('#size0set').click(function() {
                var size = $("#size0setInput").val()
                size = Number(size)
                if(size >=1 && size <= 9){
                    var cmd = "size0" + String.fromCharCode(size);
                    data = {'cmd' : cmd};
                    senddata(data);
                }
            });
            $('#size1set').click(function() {
                var size = $("#size1setInput").val()
                size = Number(size)
                if(size >=1 && size <= 4){
                    var cmd = "size1" + String.fromCharCode(size);
                    data = {'cmd' : cmd};
                    senddata(data);
                }
            });
            var ui=0;
            setInterval(() =>{
                ui++;
                ((ui) => {
                    $('#image').attr('src', "/SC/get-image/"+ui)
                }) (ui)
            },1000)
        });
    setInterval(() => {
        $.ajax({
            type: 'POST',
            url: '/SC/getdate',
            success: (response) => {
                /* 时间更新 */
                const ESP32Cam = JSON.parse(response.ESP32Cam)
                const second = response.date.slice(-6, -4);
                const minute = response.date.slice(-9, -7);
                const hour = response.date.slice(-12, -10);
                $('#nowtime').html(hour + ":" + minute + ":" + second);
                /* 自动喂养 */
                $('#autofeed').html(ESP32Cam.autofeed?"开启":"关闭");
                $('#feedtime0').html(ESP32Cam.feedtime0);
                $('#feedtime1').html(ESP32Cam.feedtime1);
                $('#feedtime2').html(ESP32Cam.feedtime2);
                $('#feedtime0On').html(ESP32Cam.feedtime0On?"开启":"关闭");
                $('#feedtime1On').html(ESP32Cam.feedtime1On?"开启":"关闭");
                $('#feedtime2On').html(ESP32Cam.feedtime2On?"开启":"关闭");
                $('#feedsize0').html(ESP32Cam.feedsize0);
                $('#feedsize1').html(ESP32Cam.feedsize1);
            }
        });
    }, 900); // 每1秒更新一次
</script>

</html>